<template>
	<view v-if="info.is_empty==0" class="empty">
		<view>
			<image src="https://ma.zhidun.vip/xcx/zd_logo.png"></image>
			<text>空码</text>
			<text>{{info.code_num}}</text>
		</view>

	</view>
	<view v-if="info.is_empty==1" class="box">
		<view class="box-header">
			<view class="box-header-title">
				<image class="box-header-title-img" src="../../static/logo.png" mode=""></image>
				<view class="box-header-title-txt">
					<text>产品质量鉴定分析报告</text>
					<text>Product quality appraisal analysis report</text>
				</view>
			</view>
			<view class="box-header-number">{{info.baogao_info.food_bao_pid}}</view>
		</view>
		<view class="box-conclusion">
			<view class="box-conclusion-tit">
				<view>结论分析</view>
				<text>青岛海关技术中心技术支持</text>
			</view>
			<view class="box-conclusion-txt">
				通过对以下项目的第三方检验报告结果分析，该产品批号样品检验项目符合国家<text style="color: darkred;">【合格】</text>标准要求。
				<br />
				<view v-html="info.baogao_info.baogao_analy"></view>
			</view>
		</view>
		<view class="box-goods">
			<image class="box-goods-img" :src="info.baogao_info.food_pic" mode="aspectFill"></image>
			<image class="box-goods-logo" src="https://ma.zhidun.vip/xcx/zd_ewm.png" mode="widthFix"></image>
			<text class="box-goods-name">{{ info.baogao_info.food_name }}</text>
			<view class="box-goods-arguments">
				<view v-if="info.is_this_pihao==1" class="item">
					<text>生产批号：</text>
					<text>{{ info.code_pihao }}</text>
				</view>
				<view v-if="info.is_this_pihao==1" class="item">
					<text>生产日期：</text>
					<text>{{ info.code_riqi }}</text>
				</view>
				<view class="item">
					<text>产品规格：</text>
					<text>{{ info.baogao_info.food_guige }}</text>
				</view>
				<view class="item">
					<text>查询编号：</text>
					<text>{{ info.code_num }}</text>
				</view>
				<view v-if="is_show" class="item">
					<text>保质期限：</text>
					<text>{{ info.baogao_info.food_baozhiqi }}</text>
				</view>
				<view v-if="is_show" class="item">
					<text>贮藏方法：</text>
					<text>{{ info.baogao_info.food_zctj }}</text>
				</view>
				<view v-if="is_show" class="item">
					<text>条码编号：</text>
					<text>{{ info.baogao_info.food_code }}</text>
				</view>
			</view>
			<image class="box-goods-bot" v-if="is_show" @click="handleMore" src="/static/img/turn_up.png" mode="">
			</image>
			<image class="box-goods-bot" v-if="!is_show" @click="handleMore" src="/static/img/turn_down.png" mode="">
			</image>
		</view>
		<!-- 	<view class="box-search">
			<uni-easyinput class="box-search-input" v-model="batch_number" placeholder="请输入生产批号"></uni-easyinput>
			<button class="box-search-btn" type="default">批号查询</button>
		</view> -->
		<view class="box-report">
			<view class="box-report-tit" @click="previewMoreImg()">
				<image class="box-report-tit-img" :src="info.baogao_info.baogao_jigou_pic" mode=""></image>
				<view class="box-report-tit-top">
					<view class="box-report-tit-top-a">
						<!-- {{info.baogao_info.baogao_name}} -->
						【{{info.baogao_info.baogao_jiance_name}}】公正检测报告
					</view>
					<view class="box-report-tit-top-b">
						<image class="box-report-tit-top-b-img" src="../../static/img/qualified.png" mode=""></image>
						<text style="margin-right: 30rpx;">合格</text>
						<text>检验日期{{info.baogao_info.baogao_jiance_time}}</text>
					</view>
				</view>
				<image src="../../static/img/bairight.png" mode=""
					style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"></image>
			</view>
			<view class="box-report-img" @click="previewMoreImg()">
				<image v-if="info.is_this_pihao==1" class="box-report-img-ok" src="https://ma.zhidun.vip/xcx/zd_this.png" mode="widthFix"></image>
				<scroll-view scroll-x="true">
					<div class="box-report-img-scroll">
						<image class="box-report-img-scroll-item" v-for="(item,index) in imglist" :src="item"
							mode="widthFix" :key="index"></image>
					</div>
				</scroll-view>
			</view>
			<view class="box-report-detail">
				<view v-if="info.baogao_info.baogao_orgsite_pic" class="detail-box">
					<text class="box-left">主料产地</text>
					<view class="box-right" @click="previewImg(info.baogao_info.baogao_orgsite_pic)">
						<text>{{ info.baogao_info.baogao_food_orgsite }}</text>
						<image src="/static/img/arrowRig.png" mode=""></image>
					</view>
				</view>
				<view v-if="info.baogao_info.baogao_jinsite_pic" class="detail-box">
					<text class="box-left">进口产地</text>
					<view class="box-right" @click="previewImg(info.baogao_info.baogao_jinsite_pic)">
						<text>{{ info.baogao_info.baogao_food_jinsite }}</text>
						<image src="/static/img/arrowRig.png" mode=""></image>
					</view>
				</view>
				<view v-if="info.certificate_info.yyzz" class="detail-box">
					<text class="box-left">营业执照</text>
					<view class="box-right" @click="previewImg(info.certificate_info.yyzz)">
						<text>有效期至 {{ info.certificate_info.yyzz_time }}</text>
						<image src="/static/img/arrowRig.png" mode=""></image>
					</view>
				</view>
				<view v-if="info.certificate_info.scxk" class="detail-box">
					<text class="box-left">生产许可</text>
					<view class="box-right" @click="previewImg(info.certificate_info.scxk)">
						<text>有效期至 {{ info.certificate_info.scxk_time }}</text>
						<image src="/static/img/arrowRig.png" mode=""></image>
					</view>
				</view>
				<view v-if="info.certificate_info.haccp" class="detail-box">
					<text class="box-left">HACCP</text>
					<view class="box-right" @click="previewImg(info.certificate_info.haccp)">
						<text>有效期至 {{ info.certificate_info.haccp_time }}</text>
						<image src="/static/img/arrowRig.png" mode=""></image>
					</view>
				</view>
				<view v-if="info.certificate_info.zlrz" class="detail-box">
					<text class="box-left">质量认证</text>
					<view class="box-right" @click="previewImg(info.certificate_info.zlrz)">
						<text>有效期至 {{ info.certificate_info.zlrz_time }}</text>
						<image src="/static/img/arrowRig.png" mode=""></image>
					</view>
				</view>
				<view v-if="info.certificate_info.hjrz" class="detail-box">
					<text class="box-left">环境认证</text>
					<view class="box-right" @click="previewImg(info.certificate_info.hjrz)">
						<text>有效期至 {{ info.certificate_info.hjrz_time }}</text>
						<image src="/static/img/arrowRig.png" mode=""></image>
					</view>
				</view>
				<view v-if="info.certificate_info.yjsp" class="detail-box">
					<text class="box-left">有机食品</text>
					<view class="box-right" @click="previewImg(info.certificate_info.yjsp)">
						<text>有效期至 {{ info.certificate_info.yjsp_time  }}</text>
						<image src="/static/img/arrowRig.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="box-tip">
			<text>质盾声明：本报告分析由青岛海关技术中心提供技术支持，仅证实该企业实施了保障该产品质量合格的其中一项重要措施，并通过质盾向公众开放查询，分析结论参照该产品批号样品的第三方检验项目报告结果产生，仅供参考。</text>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/request.js';
	export default {
		data() {
			return {
				food_num: '0',
				code_num: '02401190000001',
				is_show: false,
				batch_number: '',
				imglist: [],
				info: {}
			}
		},
		onLoad(options) {
			let uri = ''
			if (options.q) {
				uri = decodeURIComponent(options.q)
			}
			if (options.url) {
				uri = decodeURIComponent(options.url)
			}
			console.log(uri, 'url');
			this.food_num = decodeURIComponent(uri).split('&')[0].split('food_num=')[1]
			this.code_num = decodeURIComponent(uri).split('&')[1].split('code_num=')[1]
			console.log(this.food_num, this.code_num, 'options.url');
			this.getData()
		},
		methods: {
			getData() {
				http.get('code/api/get_code_info?food_num=' + this.food_num + '&code_num=' + this.code_num).then(res => {
					console.log(res);
					this.info = res
					this.imglist = res.baogao_info.baogao_pic.split(',')
					console.log(this.imglist);
				});
			},
			iconClick(type) {
				uni.showToast({
					title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
					icon: 'none'
				})
			},
			handleMore() {
				this.is_show = !this.is_show
			},
			previewImg(photoImg) {
				let imgsArray = [];
				imgsArray[0] = photoImg;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			previewMoreImg() {
				let imgsArray = this.imglist;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			}

		}
	}
</script>

<style lang="scss">
	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;

		&>view:first-child {
			display: flex;
			flex-direction: column;
			align-items: center;

			&>image {
				width: 144rpx;
				height: 200rpx;
			}

			&>text:nth-child(2) {
				color: #666;
				margin-top: 40rpx;
			}

			&>text:nth-child(3) {
				color: #222;
				margin-top: 20rpx;
			}
		}

	}

	.box {
		background-color: #EDEDED;
		color: #222;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&-header {
			display: flex;
			flex-direction: column;
			height: 400rpx;
			background-image: url("https://ma.zhidun.vip/xcx/zd_top.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			-moz-background-size: 100% 100%;

			&-title {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 91rpx;


				&-img {
					width: 72rpx;
					min-width: 72rpx;
					height: 100rpx;
					margin-right: 20rpx;
				}

				&-txt {
					display: flex;
					flex-direction: column;
					align-items: center;

					&>text:nth-child(1) {
						font-size: 42rpx;
						font-weight: 600;
						letter-spacing: 8rpx;
					}

					&>text:nth-child(2) {
						font-size: 24rpx;
					}
				}
			}

			&-number {
				color: #fff;
				text-align: end;
				margin-top: 20rpx;
				margin-right: 93rpx;
				font-size: 26rpx;
			}
		}

		&-conclusion {
			border-radius: 30rpx;
			margin: -123rpx 30rpx 0 30rpx;
			background-color: #fff;

			&-tit {
				display: flex;
				align-items: center;
				position: relative;
				height: 100rpx;
				color: #fff;
				margin-bottom: 20rpx;
				font-weight: 600;
				font-size: 30rpx;
				background-image: url("https://ma.zhidun.vip/xcx/zd_bg.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-moz-background-size: 100% 100%;

				&>view:nth-child(1) {
					padding: 16rpx 30rpx;
					padding-bottom: 18rpx;
					margin-left: 20rpx;
					background-image: url("https://ma.zhidun.vip/xcx/zd_width.png");
					background-repeat: no-repeat;
					background-size: 100% 100%;
					-moz-background-size: 100% 100%;
				}

				&>text:nth-child(2) {
					padding: 10rpx 20rpx;
					position: absolute;
					right: 0;
				}
			}

			&-txt {
				padding: 0 20rpx 30rpx 20rpx;
				line-height: 46rpx;
				font-size: 25rpx;
				color: #222;
			}
		}

		&-goods {
			display: flex;
			flex-direction: column;
			position: relative;
			background-color: #fff;
			color: #222;
			border-radius: 30rpx;
			margin: 30rpx;

			&-img {
				// border-top-left-radius: 30rpx;
				// border-top-right-radius: 30rpx;
				border-radius: 30rpx;
				width: 100%;
			}
            
			&-logo{
				width: 120rpx;
				position: absolute;
				right: 20rpx;
				top: 0rpx;
			}
			
			&-name {
				font-size: 32rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				// margin-top: -30rpx;
				padding: 20rpx 20rpx 0 20rpx;
				font-weight: 600;
				background-color: #fff;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;
			}

			&-arguments {
				display: flex;
				flex-direction: column;
				margin: 20rpx;

				.item {
					display: flex;
					align-items: center;
					margin-top: 15rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #73706E;

					&>text:last-child {
						margin-left: 10rpx;
					}
				}
			}

			&-bot {
				width: 30rpx;
				height: 30rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
			}
		}

		&-search {
			border-radius: 10px;
			background-color: #fff;
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			height: 120rpx;
			padding-left: 20rpx;

			&-input {}

			&-btn {
				background: #aa0000 !important;
				color: #fff !important;
				margin-right: 20rpx;
				margin-left: 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
			}
		}

		&-report {
			border-radius: 20rpx;
			background-color: #fff;
			color: #222;
			margin:0 30rpx;
			padding-bottom: 40rpx;

			&-tit {
				display: flex;
				align-items: center;
				color: #fff;
				background-image: url("https://ma.zhidun.vip/xcx/zd_bg.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				-moz-background-size: 100% 100%;

				&-img {
					width: 80rpx;
					height: 80rpx;
					margin:14rpx 20rpx;
				}

				&-top {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					font-size: 26rpx;

					&-a {
						margin-bottom:4rpx;
						font-weight: 600;
						font-size: 30rpx;
					}

					&-b {
						display: flex;
						align-items: center;

						&-img {
							width: 44rpx;
							height: 44rpx;
							margin-left: 5px;
						}
					}
				}
			}

			&-img {
				display: flex;
				align-items: center;
				margin:0 20rpx;
                position: relative;
				
				&-ok{
					position: absolute;
					z-index: 6;
					left: 50%;
					transform: translateX(-50%);
					width: 190rpx;
				}
				&-scroll {
					display: inline-flex;
					margin: 20rpx 0;

					&-item {
						width: 240rpx;
						height: 240rpx;
						margin-right: 30rpx;
					}
				}
			}

			&-detail {
				display: flex;
				flex-direction: column;
				margin: 0 20rpx;
				margin-top: 20rpx;
				font-size: 28rpx;
				:nth-child(odd){
					.box-left{
						background-color: #7CD8FA;
					}
					.box-right{
						background-color: #7CD8FA;
					}
				}


				.detail-box {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					.box-left {
						margin-right: 20rpx;
						padding: 20rpx 0;
						width: 160rpx;
						text-align: center;
					}

					.box-right {
						flex: 1;
						display: flex;
						align-items: center;
						padding: 20rpx 20rpx;

						&>text {
							flex: 1;
						}

						&>image {
							height: 20rpx;
							width: 20rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}

		&-tip {
			margin: 40rpx 50rpx 50rpx 50rpx;
			color: #999;
			font-size: 24rpx;
		}
	}
</style>